iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 5

[前端暴龍機,Vue2.x 進化 Vue3 ] Day5. Vue的起手開發

  • 分享至 

  • xImage
  •  

接下來,開始看看如何著手進行 Vue 的開發吧
這邊都是透過最原始、最簡單的網頁開發模式進行,所以不會介紹到 Cli 的方式~

Hello Vue ,第一個 Vue 網頁開發

還記得~ 不管是 Java、Python、C ...每次學習一個新的語言,第一個學會的範例就是跟它 say hello
所以我們也來一個 Hello Vue 吧~

1.引入 Vue 資源

我們要使用別人的功能,第一件做的事就是把資源給引入進來,才可以使用
所以我們可以透過官網,將 Vue 的 CDN 給貼到 html 中

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.建立 Vue 實例

每一個 Vue 的應用都是透過 new Vue({}) 的方式來創建實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <script>
        var vm = new Vue({})
    </script>
</body>
</html>

所以 vm 就會是我們的一個 Vue 的應用

3.Vue 可作用的空間

Vue 的實例已經宣告完畢,接著我們必需告訴它哪裡的範圍是 Vue 可以提供服務的,透過的是 el 去指定。
假設 : 我們要使用 Vue 提供服務的區塊為在 id 為 app 的 div 區塊,所以如果不是在 app 區塊裡面的就沒有 vue 的功能了。

<body>
    // 在這裡就無法使用 Vue 所提供的服務
    <div id="app">
        // 在此區塊才可以使用 Vue 所提供的服務
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>

https://ithelp.ithome.com.tw/upload/images/20210812/201207221N1BRR5gNE.jpg
如圖,沒有在 el 定義的可作用的空間內,就會被當成存文字顯示

4.數據與方法

接著,Vue 提供了兩個分別管理數據(data)和方法(methods)的區塊來集中管理,只要在 data 裡所有宣告的變數有渲染到畫面上,那麼如果變數的值發生變更,畫面就會產生"響應",即把更新後的值重新渲染到畫面上

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            // 宣告變數的地方
        },
        methods:{
            // 做事件處理的地方
        }
    })
</script>

5.將數據渲染到畫面上(聲明式渲染)

聲明式渲染是一個模板語法,可以將數據渲染到 DOM ,透過 {{ 變數 }} 表示,由雙花括號 {{ }} 所包住,就可在 DOM 上渲染出變數的值了,又稱做插值表示式

<div id="app">
    {{ msg }}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            msg: 'Hello Vue'
        },
        methods:{
      
        }
    })
</script>

https://ithelp.ithome.com.tw/upload/images/20210812/20120722EPzFRwJDHV.jpg

成功 Hello Vue 啦~/images/emoticon/emoticon08.gif
後面可能會參考 Vue 官方文件的節奏來介紹

最後附上程式碼 Codepen Hello Vue


參考資源

Vue 官方文件


上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day4. Vue的生命週期
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day6. 模板語法
系列文
前端暴龍機,Vue2.x 進化 Vue330
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
olivermode
iT邦新手 3 級 ‧ 2023-05-31 16:39:39
gior__ann iT邦新手 2 級 ‧ 2023-06-01 17:19:29 檢舉

/images/emoticon/emoticon12.gif

我要留言

立即登入留言